<template>
  <dv-charts :option="option" />
</template>

<script>

export default {
  name: "RadarChart",
  props: {
    // 数据
    chartsRadarData: {
      type: Object,
      required: true,
    },
    // 是否显示数值标签
    labelIsShow: {
      type: Boolean,
      required: false,
      default: false
    },
    // 是否显示为多边形坐标系
    polygonIsShow: {
      type: Boolean,
      required: false,
      default: false
    },
    // 是否显示图例
    legendIsShow: {
      type: Boolean,
      required: false,
      default: false
    },
  },
  data() {
    return {
      option: {},
    };
  },
  methods: {
    createChart() {
      // 循环数据，取出图例legend下的data数据
      let _legendData = [];
      this.chartsRadarData.series.forEach((item) => {
        _legendData.push({
          name: item.name,
        });
      });
      // console.log(_legendData)
      // 循环数据，取出series下的data数据
      let _series = [];
      this.chartsRadarData.series.forEach((item, index) => {
        _series.push({
          name: item.name,
          data: item.data,
          type: "radar",
          label: {
            show: this.labelIsShow
          },
          animationCurve: 'easeOutBounce'
        });
      });
      this.option = {
        legend: {
          show: this.legendIsShow,
          textStyle: {
            fill: '#ccc'
          },
          data: _legendData
        },
        radar: {
          polygon: this.polygonIsShow,
          indicator: this.chartsRadarData.indicator
        },
        series: _series
      };
    },
  },
  watch: {
    chartsRadarData: {
      handler(newValue, oldValue) {
        if (oldValue != newValue) {
          this.createChart();
        }
      },
      deep: true,
    },
  },
};
</script>

</style>
